<template>
  <div>
    <h3>Vue3样式绑定</h3>
    <div class="one"></div>
    <div :class="age==18?classB:classA"></div>
    <div :class="classA"></div>
    <div style="width: 100px;height: 50px;background:#778899;">style</div>
    <div :style="{width: '100px',height: height,background: bg}">绑定动态的Style1</div>
    <div :style="styleA">绑定动态的Style2</div>
  </div>
</template>

<script>
export default {
  name: 'Course8-9',
  data() {
    return {
      age: 18,
      classA: 'one',
      classB: 'two',
      height: '50px',
      bg: '#887771',
      styleA: {
        height: '48px',
        lineHeight: '48px',
        background: "#88ff11"
      }
    }
  }
}
</script>

<style>
.one{
  width: 100px;
  height: 60px;
  background: #ff7788;
}
.two{
  width: 100px;
  height: 60px;
  background: #559988;
}
</style>